<template>
  <!-- 导航区域 -->
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item index="0">
      <template slot="title">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </template>
    </el-menu-item>

    <!--
        遍历menuList        v-for,唯一键绑定menu.name
        子集menu.children   v-for,跳转绑定menu.children[x].path
     -->
    <el-submenu default-active="SysManga" :index="menu.name" v-for="menu in menuList" :key="menu.name">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{ menu.title }}</span>
      </template>
      <router-link :to="item.path" v-for="item in menu.children" :key="item.name">
        <el-menu-item :index="item.name">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </template>
        </el-menu-item>
      </router-link>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          name: 'SysManga',
          title: '系统管理',
          icon: 'el-icon-s-operation',
          path: '',
          component: '',
          children: [
            {
              name: 'User',
              title: '用户管理',
              icon: 'el-icon-s-custom',
              path: '/user',
              children: [],
            },
            {
              name: 'Role',
              title: '角色管理',
              icon: 'el-icon-rank',
              path: '/home/system/role',
              children: [],
            },
            {
              name: 'Menu',
              title: '菜单管理',
              icon: 'el-icon-menu',
              path: '/home/system/menu',
              children: [],
            },
          ],
        },
        {
          name: 'SysTools',
          title: '系统工具',
          icon: 'el-icon-s-tools',
          path: '',
          children: [
            {
              name: 'SysDict',
              title: '数字字典',
              icon: 'el-icon-s-order',
              path: '/home/tool/dict',
              children: [],
            },
          ],
        },
      ],
    }
  },
}
</script>
<style lang="scss" scoped>
// 左侧-导航
.el-menu {
  height: 100%;
}
</style>
